
<template>
  <!-- 加油登记 -->
  <div class="alarm-record-wrap">
    <el-table border :resizable="false" :data="recordData" style="width: 100%">
      <el-table-column prop="deviceTypeFont" label="序号" />
      <el-table-column prop="alarmTypeFont" label="IC卡编号" />
      <el-table-column prop="deviceName" label="车牌号" />
      <el-table-column prop="alarmReason" label="油品名称" />
      <el-table-column prop="createDate" label="应加数量(L)" />
      <el-table-column prop="createDate" label="实加数量(L)" />
      <el-table-column prop="createDate" label="加油时间(L)" />
    </el-table>
    <div class="dis-cen com-pagination">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
import { selectCountAndList } from '@/api/fuelDelivery.js'

export default {
  name: 'Enrollment',
  data() {
    return {
      // 总条数
      total: 1,
      recordData: [],
      pageNum: 1,
      pageSize: 10,
      endTime: new Date().getTime(),
      startTime: new Date().getTime() - 3600 * 1000 * 24 * 7
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 当前页码改变触发
    currentChange(n) {
      this.pageNum = n
      this.getData()
    },
    // 当前size变动触发
    handleSizeChange(size) {
      this.pageSize = size
      this.getData()
    },
    getData() {
      selectCountAndList({
        deliveryType: 0,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        endTime: this.endTime,
        startTime: this.startTime
      })
        .then(res => {
          console.log('数据')
          console.log(res)
          //   this.alarmData = res.data.list.map(val => {
          //     val.deviceTypeFont = handleByDeviceType(val.deviceType);
          //     val.alarmTypeFont = handleAlarmType(val.alarmType);
          //     return val;
          //   });
          //   this.total = res.data.total;
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/com.scss";
.alarm-record-wrap {
  padding: 30px 5px;
}
.alarm-record-wrap,
.table-wrap {
  width: 100%;
}

.com-pagination {
  margin: 30px 0;
}
</style>
